@charset "utf-8";
@import "common/common";

#web{
    overflow: hidden;
}

section{
    width: 100%;
    position: absolute;
    top: r(75);
   bottom: r(62);
    overflow-y: scroll;
        .carous{
            width: r(640);
            height: r(300);
         overflow: hidden;
            img{
               @include img();
            }
        }
        .swiper-pagination{
             top: r(200);
             left: r(261);
        }
        .swiper-pagination-bullet{
            width: r(14);
            height: r(14);
            background: #C1C1C1;
            margin-right: r(12);
        }
        .swiper-pagination-bullet-active{
            background: white;
        }
        article{
            .navbar{
                width: 100%;
                height: r(146);
                overflow: hidden;
                background: #f2f2f2;
                ul{
                    width: r(501);
                    margin: r(28) auto 0;
                    li{
                        float: left;
                        width: r(90);
                        height: r(90);
                        margin-right: r(47);
                        &:last-child{
                            margin-right: 0;
                        }
                        a{
                            display: block;
                            @include img();
                            overflow: hidden;
                            img{
                                @include img();
                            }
                        }
                    }
                }
            }
            .content{
                width: r(584);
                margin: 0 auto;
                .title{
                    width: 100%;
                    height: r(56);
                    display: block;
                    line-height: r(56);
                        img{
                            vertical-align: top;
                            margin-top: r(14);
                            width: r(29);
                            height: r(29);
                            margin-right: r(11);
                        }
                        span{
                            font-size: r(24);
                            color: #000;
                            vertical-align: top;
                        }
                }
                .circleMsg{
                    li{
                        width: 100%;
                        height: r(120);
                        margin-bottom: r(6);
                        &:last-child{
                            margin-bottom: 0;
                        }
                        .circleImg{
                            width: r(150);
                            height: r(120);
                            overflow: hidden;
                            img{
                                @include img();
                            }
                        }
                       .circleInfo{
                           width: r(420);
                           height: r(119);
                           border-bottom:r(1) solid #a7a7a7;
                           .cirTitle{
                               width: 100%;
                               height: r(46);
                               a{
                                 font-size: r(21.34);
                                 color: #000;  
                                 line-height: r(50);
                                 vertical-align: top;
                               }
                           }
                           .add{
                               //padding-bottom: r(9);
                               a{
                                   font-size: r(18.67);
                                   color: #000;
                                   opacity: 0.6;
                                   img{
                                       width:r(25);
                                       height: r(25);
                                       opacity: 1;
                                   }
                               }
                           }
                           ul{
                               height: r(40);
                               li{
                                   float: left;
                                   width: r(116);
                                   height: r(40);
                                   &:nth-child(2){
                                       width: r(106);
                                   }
                                   img{
                                       width: r(24);
                                       height: r(16);
                                       display: block;
                                       margin-top: r(13);
                                       margin-right: r(8);
                                   }
                                   p{
                                       line-height: r(40);
                                       width: r(24);
                                       span{
                                           font-size: r(16);
                                            color: #000;
                                            opacity: 0.4;
                                            vertical-align: top;
                                       }
                                   }
                               }
                           }
                       } 
                    }
                }
            }
        }
}
    .popping{
    width: 100%;
    height: 100%;
    background: url(../project-ArtsBox/img/bg.png);
    background-size: 100%;
    position: absolute;
    top: r(0);
    bottom: 0;
    z-index:999;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
        transition: all 800ms;
    .poppingWrap{
        transform: translateY(260%);
        transition: all 800ms;
        ul{
            font-size: r(24);
            margin-left: r(64);
            
            li{
                float: left;
                margin-right: r(74);
                text-align: center;
                color: white;
               .icon_img{
                   width: r(118);
                   height: r(118);
                   margin-bottom: r(16);
                   img{
                       width: 100%;
                       height: 100%;
                   }
               }
               a{
                   color: white;
               } 
            }
        }
        .two{
            margin-left: r(170);
            li{
                 margin-top: r(45);
                 margin-bottom: r(40);
            }
        }
        .close{
            width: r(54);
            //height: r(54);
            margin: 0 auto;
            
            img{
                width: 100%;
                height: 100%;
            }
        }
    }

}
